<ui:composition template="../WEB-INF/templates/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:tc="http://java.sun.com/jsf/composite/components">

	<ui:define name="content-title">
		<h:outputLabel>Register Here</h:outputLabel>
	</ui:define>

	<ui:define name="content">
		<h:form>
			<p:messages id="message" />
			<p:growl id="growl" sticky="true" showDetail="true"  />
			<p:wizard widgetVar="regWiz" backLabel="Back" nextLabel="Next" style="font-size:15px;border-radius: 5px; height:550px;background-color: #FCFDFD;">
			   <p:tab title="Personal Information">				
					<p:panel header="User Data">
						
						<h:panelGrid columns="3"> 				    
						     
						     <p:outputLabel  value="Gender:" style="margin-left:93px"/>					   
							 <p:selectOneRadio value="#{registrationBean.user.gender}" id="gender" layout="lineDirection">
								<f:selectItem id="Female" itemLabel="Female" itemValue="Female"/>
								<f:selectItem id="Male" itemLabel="Male" itemValue="Male"/>
							</p:selectOneRadio>	
							<p:message for="gender" showDetail="true" />
															    
							<p:outputLabel value="Firstname:" style="margin-left:70px"/>						
							<p:inputText id="firstName" value="#{registrationBean.user.firstname}"/>
							<p:message for="firstName" showDetail="true" />
								
							<p:outputLabel value="Lastname:" style="margin-left:70px"/>						
							<p:inputText id="lastName" value="#{registrationBean.user.lastname}" />
							<p:message for="lastName" showDetail="true" />
								
							<p:outputLabel value="Username:" style="margin-left:70px"/>						
							<p:inputText id="userName" value="#{registrationBean.user.username}"/>
							<p:message for="userName" showDetail="true" />
								
							<p:outputLabel value="Password:" style="margin-left:70px"/>						
							<p:password id="password1" value="#{registrationBean.user.password}" match="password2" required="true"/>
		 					<p:message for="password1" showDetail="true" />
							
					 		<p:outputLabel value="Re-Enter Password:" style="margin-left:7px"/>						
							<p:password id="password2" value="#{registrationBean.user.password}" required="true"/>
							<p:message for="password2" showDetail="true" />
				 																
							<p:outputLabel value="Email:" style="margin-left:100px"/>						
							<p:inputText id="email" value="#{registrationBean.user.email}"/>
							<p:message for="email" showDetail="true" />
							
							<p:outputLabel value="Language:" style="margin-left:70px"/>						
							<p:selectOneMenu value="#{registrationBean.user.language}"  var="l" id="language"
							  style="width:160px" converter="#{languageConverter}">
								<f:selectItem itemLabel="" itemValue=""/>
								<f:selectItems value="#{registrationBean.languages}" var="langs" itemValue="#{langs}" itemLabel="#{langs.name}"/>
								 
								<p:column>
									#{l.name}
								</p:column>
								
								<p:column>
									<p:graphicImage name="images/flags/#{l.flag}.png" width="30"/>
								</p:column>
							</p:selectOneMenu>
							<p:message for="language" showDetail="true" />
							
							<p:outputLabel value="Country:" style="margin-left:70px"/>						
							<p:selectOneMenu value="#{registrationBean.user.country}"  var="c" id="country"
							  style="width:160px" converter="#{countryConverter}">
								<f:selectItem itemLabel="" itemValue=""/>
								<f:selectItems value="#{registrationBean.countryList}" var="counts" itemValue="#{counts}" itemLabel="#{counts.name}"/>
								 
								<p:column>
									#{c.name}
								</p:column>
								
								<p:column>
									<p:graphicImage name="images/flags/#{c.flag}.png" width="30"/>
								</p:column>
							</p:selectOneMenu>
							<p:message for="country" showDetail="true" />
								
							<p:outputLabel value="Cell Phone Number:" />						
							<p:inputText id="cellphone" value="#{registrationBean.user.cellPhoneNumber}"/>
							<p:message for="cellphone" showDetail="true" />
								
							<p:outputLabel value="Telephone Number:"/>						
							<p:inputText id="telephone" value="#{registrationBean.user.telephoneNumber}"/>
							<p:message for="telephone" showDetail="true" />
							
							</h:panelGrid>	
							
						</p:panel>	
					</p:tab>	
					<p:tab title="Address Information">
						<p:panel header="Billing Address">
							<h:panelGrid columns="2">
								<p:outputLabel value="Street:"/>
								<p:inputText  value="#{registrationBean.user.billingAddress.street}"/>
								
								<p:outputLabel value="Postal Code:"/>
								<p:inputText  value="#{registrationBean.user.billingAddress.postalCode}"/>
								
								<p:outputLabel value="Post Box:"/>
								<p:inputText  value="#{registrationBean.user.billingAddress.postBox}"/>
								
								<p:outputLabel value="City:"/>
								<p:inputText  value="#{registrationBean.user.billingAddress.city}"/>
								
								<p:outputLabel value="State:"/>
								<p:inputText  value="#{registrationBean.user.billingAddress.state}"/>	
								
								<p:outputLabel value="Country:" style="margin-left:70px"/>						
								<p:selectOneMenu value="#{registrationBean.user.billingAddress.country}"  var="c" id="bcountry"
								  style="width:160px" converter="#{countryConverter}">
									<f:selectItem itemLabel="" itemValue=""/>
									<f:selectItems value="#{registrationBean.countryList}" var="counts" itemValue="#{counts}" itemLabel="#{counts.name}"/>
									 
									<p:column>
										#{c.name}
									</p:column>
									
									<p:column>
										<p:graphicImage name="images/flags/#{c.flag}.png" width="30"/>
									</p:column>
								</p:selectOneMenu>	
							    
							    <p:outputLabel value="Same as Shipping Address"/>		
							    <p:selectBooleanCheckbox id="sameAddress" value="#{registrationBean.sameAddress}" 
							                    onchange="toggleShippingAddress(this.checked)" />				
								
							</h:panelGrid>	
							
							<h:outputScript>
								function toggleShippingAddress(checked)
								{
									if (checked)                            
	                       			 {
	                       			 	jQuery("#shippingAddressWrapper").slideUp("slow");
	                       			 }
	                       			 else
	                       			 {
	                       			 	jQuery("#shippingAddressWrapper").slideDown("slow");
	                       			 }
                       			 
                       			 }
							</h:outputScript>
																				
						</p:panel>
						<div id="shippingAddressWrapper">
							<p:panel header="Shipping Address">
									<h:panelGrid columns="2">
										<p:outputLabel value="Street:"/>
										<p:inputText  value="#{registrationBean.user.shippingAddress.street}"/>
										
										<p:outputLabel value="Postal Code:"/>
										<p:inputText  value="#{registrationBean.user.shippingAddress.postalCode}"/>
										
										<p:outputLabel value="Post Box:"/>
										<p:inputText  value="#{registrationBean.user.shippingAddress.postBox}"/>
										
										<p:outputLabel value="City:"/>
										<p:inputText  value="#{registrationBean.user.shippingAddress.city}"/>
										
										<p:outputLabel value="State:"/>
										<p:inputText  value="#{registrationBean.user.shippingAddress.state}"/>	
										
										<p:outputLabel value="Country:" style="margin-left:70px"/>						
										<p:selectOneMenu value="#{registrationBean.user.shippingAddress.country}"  var="c" id="scountry"
										  style="width:160px" converter="#{countryConverter}">
											<f:selectItem itemLabel="" itemValue=""/>
											<f:selectItems value="#{registrationBean.countryList}" var="counts" itemValue="#{counts}" itemLabel="#{counts.name}"/>
											 
											<p:column>
												#{c.name}
											</p:column>
											
											<p:column>
												<p:graphicImage name="images/flags/#{c.flag}.png" width="30"/>
											</p:column>
										</p:selectOneMenu>		
																
									</h:panelGrid>									
															
								</p:panel>
						</div>	
						<p:commandButton value="Submit" update="growl, message" actionListener="#{registrationBean.register}" style="margin-left:820px"/>													
					</p:tab>
					        
				</p:wizard>	
				
								
		</h:form>
	</ui:define>
</ui:composition>